<template>
	<view class="content">
		<waterfallsFlow :list="list">
			<!--  #ifdef  MP-WEIXIN -->
			<view v-for="(item, index) of list" :key="item.id" slot="slot{{index}}">
				<view class="cnt">
					<view class="title">{{ item.title }}</view>
					<view class="text">{{ item.text }}</view>
				</view>
			</view>
			<!--  #endif -->

			<!-- #ifndef  MP-WEIXIN -->
			<template v-slot:default="item">
				<view class="cnt">
					<view class="title">{{ item.title }}</view>
					<view class="text">{{ item.text }}</view>
				</view>
			</template>
			<!-- #endif -->
		</waterfallsFlow>
	</view>
</template>

<script>
import waterfallsFlow from '@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue';
import listData from './data.js';

export default {
	components: { waterfallsFlow },
	data() {
		return {
			list: []
		};
	},
	onReachBottom() {
		setTimeout(() => {
			this.list = this.list.concat(
				listData.data.map((ele, index) => {
					return {
						...ele,
						id: index,
						image_url: ele.pic_url,
						text: ele.title
					};
				})
			);
		}, 1000);
	},
	onLoad() {
		this.list = listData.data.map((ele, index) => {
			return {
				...ele,
				id: index,
				image_url: ele.pic_url,
				text: ele.title
			};
		});
	}
};
</script>
<style>
page {
	background-color: #eee;
}
</style>
<style lang="scss" scoped>
.content {
	padding: 10px;
	.cnt {
		padding: 10px;
		position: absolute;
		bottom: 0;
		width: 100%;
		background-color: rgba(255,255,255,.4);
		color: #fff;
		.title {
			font-size: 16px;
		}
		.text {
			font-size: 14px;
			margin-top: 5px;
		}
	}
}
</style>
